<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        body {
            perspective: 800px;
            transform-style: preserve-3d;
            perspective-origin: 300px 300px;
        }
        
        div {
            position: fixed;
            left: calc(50% - 100px);
            top: calc(100px);
            width: 200px;
            height: 200px;
            background-image: url("./pic1.jpeg");
            background-size: cover;
            transform-origin: 0 0;
            /* 坐标原点会影响scale的缩放 */

            transform: scale(1, 1);
            /* 
              沿x轴方向放大1倍 沿y轴方向放大1倍
              值大于1放大，小于1收缩，负数会反向伸展成轴对称或中心对称，0的时候没有图像了
              scale：伸缩的是此元素在变换坐标轴方向上的刻度
              所以伸缩之后盒模型的长宽还是200px
              伸缩之后，会影响translate属性。
              
            */

            transform: scale(0.5, 0.5) scale(3, 3);
            /* 
             两个scale可以进行组合，最终相当于放大1.5倍
             但是中间如果有别的变换，那就说不准了
            */

            transform: scale(2, 1) rotate(-45deg) scale(2, 1);
            /*  
              和旋转一起使用时：

              雁过留声：伸缩一次就会保持对当前伸缩方向的影响
              如果先旋转，伸缩会在旋转之后的轴的方向上
              如果先伸缩，在旋转，则坐标轴旋转了，伸缩的方向却没变
              伸缩是没有轴的，但是伸缩是有方向的，伸缩的方向就是当前轴的方向，并且伸缩方向不会变化
            */


            transform: scaleX(1.5);
            /* 
              单独设置沿x轴的伸缩
            */

            transform: scaleY(1.5);
            /* 
              单独设置沿y轴的伸缩
            */

            transform: scaleZ(1.5);
            /* 
              单独设置沿z轴的伸缩，在复杂的变换中可能有用
            */

            transform: rotateY(90deg) scaleZ(2) rotateX(40deg);
            transform: rotateY(90deg) rotateX(40deg) scaleZ(2);
            /* 
              第一种时会看到scalez的效果，但是scalez放到最后则不会有效果
            */


            transform: scale3d(1.5, 1.5, 1.5);
            /* 相当于分别设置scalex scaley scalez 为1.5倍*/
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>